<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Diffing Key</title>
</head>
<body>

<div id="test"></div>

<script src="js/react.development.js" crossorigin></script>
<script src="js/react-dom.development.js" crossorigin></script>
<script src="js/babel.js"></script>

<script type="text/babel">

    class Person extends React.Component {

        state = {
            person: [
                {id: 1, name: 'Duo', age: 19},
                {id: 2, name: 'Anna', age: 20}
            ]
        }

        newInsert = () => {
            let {person} = this.state;
            // person.push({id: 3, name: 'Li', age: 18});
            this.setState({person: [{id: person.length + 1, name: 'Li', age: 18}, ...person]});
        }

        render() {
            return (
                <div>
                    <h2>show person info</h2>
                    <button onClick={this.newInsert}>new Insert</button>
                    <h3>use id key</h3>
                    <ul>
                        {this.state.person.map((value, index) => {
                            return <li key={value.id}>{value.name} === {value.age} <input type='text'/></li>
                        })}
                    </ul>
                    <h3>use index key</h3>
                    <ul>
                        {this.state.person.map((value, index) => {
                            return <li key={index}>{value.name} === {value.age} <input type='text'/></li>
                        })}
                    </ul>
                </div>
            );
        }
    }

    ReactDOM.render(<Person/>, document.getElementById('test'))
</script>
</body>
</html>